<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="Concepts An ArcGIS Web AppBuilder theme is a collection of user interface elements that define an app's look-and-feel, layout, app navigation, and on screen functional UI items such as scale bar, overview map, and so on. By developing a theme, you can create your application's interface, interactive user experience, and branding style. The theme elements includes widget panels, style sheets, and layout definitions and theme widgets. One app can include more than one theme, but can only use one theme while running. The following are the UI element definitions: Theme elementDefinitionPanel A Panel is a UI window that displays a widget's content. A Panel can be developed to have its own distinct behavior"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
Concepts
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-00B3C9C2-641A-4C3C-8822-87395B547751]--><body><div id="content"><div class="header"><h1>
Concepts
</h1><div id="breadcrumb"></div></div>
<p id="GUID-55D75C6E-BE7F-46B2-AF28-59F524BFB3D3">An ArcGIS Web AppBuilder theme is a collection of user interface
elements that define an app's look-and-feel, layout, app
navigation, and on screen functional UI items such as scale bar,
overview map, and so on. By developing a theme, you can create your application's interface, interactive user experience, and branding
style.</p>
<p id="GUID-66C5389D-C954-42F5-BEDB-2530689D0B46">The theme elements includes widget panels, style sheets, and
layout definitions and theme widgets. One app can include more than
one theme, but can only use one theme while running.</p>
<p id="GUID-D16E69BA-967E-4985-B8A2-69D7E7F99CF0">The following are the UI element definitions:</p>

<p id="GUID-5846FAAA-3C80-497D-9AB0-6AA4C0C5E44C"><div class="block_table" id="TABLE_361C4118ABF44DB883B176EA7F0B5704" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tr purpose="thead"><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-73C91B32-9484-4244-8798-789FAB1B3AA3">Theme element</p></th><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-65658465-5D37-42B0-9534-9AA934D54933">Definition</p></th></tr><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-9497EE98-87AF-4A27-A249-7441A7772537"><span class="usertext">Panel</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-1BE7ABF6-12AF-4C76-A9FD-3F27406C7CC3"> A Panel is a UI window that displays a widget's
content. A Panel can be developed to have its own distinct
behavior and style for a specific theme. For example, you can
develop a Panel that can be dragged around the screen and have
purple color style that matches your overall theme
style.</p>
<p id="GUID-5848F342-44F7-4D9A-A9CF-2ED8D51830CC"> With the theme Panel, widget developers can
focus on developing a widget's function and content without
worrying about how the widget displays, which further simplifies
the widget development task.</p>
<p id="GUID-295D7FA9-9E12-404C-B259-6D93D59F0DDA"> A theme can contain multiple Panels.</p>
</td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-7E5EB1E6-BC4A-40E4-B1EC-A753F6A24EEA"><span class="usertext"> Theme Widget</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-10A054B2-447F-4588-AB9F-34A5FB83DCCE"> A Theme widget is no more than a regular Web
AppBuilder widget in terms of coding. However, without this widget
as part of the theme, the theme is not complete. For example, the
Header Controller widget is part of the out-of-the-box theme, called
Foldable theme. Header Controller is developed to navigate all the
widgets configured into an app.</p>
<p id="GUID-8530A511-F517-4B3A-A500-D63D69029469"> Creating the Theme widget is also a mechanism
to ensure a theme can be shared as whole.</p>
</td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-7FE8E177-E2B2-4DA9-8808-9A2FAB818E3D"><span class="usertext">Style</span></p></td><td purpose="entry" rowspan="1" colspan="1"> <p id="GUID-2E919E39-702C-4788-856D-F4FCB222C17E">   A Style is a CSS file that you can define your CSS rules in. One theme can contain multiple styles.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-AB9C57EF-EF77-4757-8F2D-29AA8EFD5DDE"><span class="usertext">Layout</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4D2B9BE0-1251-4752-87F2-C50A32C1016A">  A Layout theme is essentially an app configuration placing all the UI elements (widgets) on the screen. It also includes predefined position holders (placeholders) on the screen that can be configured with widgets in the GUI AppBuilder. A theme can have multiple layouts.</p></td></tr></tbody></table><span class="table_desc"></span></div></p><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>